<template>
  <div class="home-banner">
    <!-- 使用全局录播图组件 注意：XtxSlider 使用的是轮播图组件name中的名字 sliders是轮播图组件中的数据列表 父子通信 -->
   <XtxSlider :sliders="bannerList"></XtxSlider>

  </div>
</template>

<script>
// 1.通过接口获取banner数据
// 2.把banner数据传给XtxSlider(这个名是以轮播图组件name为准)组件让他显示
import { findBanner } from '@/api/home'
import { ref } from 'vue-demi'
export default {
  name: 'HomeBanner',
  setup () {
    // 使用变量接收 ref方法定义的数据
    const bannerList = ref([])
    // 定义函数在函数调用接口
    async function fetchLIst () {
      const res = await findBanner()
      // 在模版中使用值就用.value
      bannerList.value = res.data.result
    }
    fetchLIst()
    return { bannerList }
  }
}
</script>

<style scoped lang='less'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}
</style>
